<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Leave Report</title>
<!-- Bootstrap core CSS -->
<link href="<c:url value="/resources/css/bootstrap.min.css"></c:url>"
	rel="stylesheet" />
<link href="<c:url value="/resources/css/bootstrap-reset.css"></c:url>"
	rel="stylesheet" />
<!--external css-->
<link
	href="<c:url value="/resources/assets/font-awesome/css/font-awesome.css"></c:url>"
	rel="stylesheet" />
<!-- Custom styles for this template -->
<link href="<c:url value="/resources/css/style.css"></c:url>"
	rel="stylesheet" />
<link href="<c:url value="/resources/css/style-responsive.css"></c:url>"
	rel="stylesheet" />

<link
	href="<c:url value="/resources/assets/advanced-datatable/media/css/demo_table.css"></c:url>"
	rel="stylesheet" />
<link href="<c:url value="/resources/css/report.css"></c:url>"
	rel="stylesheet" />
</head>
<body>
	<jsp:useBean id="rowsLimit" class="java.util.ArrayList">
		<%
			rowsLimit.add(5);
				rowsLimit.add(10);
				rowsLimit.add(15);
				rowsLimit.add(20);
		%>
	</jsp:useBean>
	<section class="panel">
	<div class="panel-body">
		<form method="post" id="frmLeaveHistory">
		<header class="panel-heading" style="width:100%; text-align:center">
			<b>Staff Leaves</b></header>
			<div class="adv-table">
				<table class="mytable">
					<tr>
						<th scope="col">Leave ID</th>
  						<th scope="col">Employee ID</th>
						<th scope="col">Start Date</th>
						<th scope="col">End Date</th>
						<th scope="col">No of Days</th>
						<th scope="col">Reason</th>
						<th scope="col">Status</th>
					</tr>
					<c:forEach items="${leaves }" var="leave">
					<tr>
						<td>
							${leave.leaveID }
						</td>
						<td>
							${leave.employeeID }
						</td>
						<td>
							<fmt:parseDate var="fmtSDate"
											value="${leave.startDate }" pattern="yyyyMMdd"></fmt:parseDate>
										<fmt:formatDate value="${fmtSDate }" pattern="dd/MM/yyyy" />
						</td>
						<td>
							<fmt:parseDate var="fmtEDate"
											value="${leave.endDate }" pattern="yyyyMMdd"></fmt:parseDate>
										<fmt:formatDate value="${fmtEDate }" pattern="dd/MM/yyyy" />
							
						</td>
						<td>
							${leave.days }
						</td>		
						<td>
							${leave.reason }
						</td>	
						<td>
							<c:choose>
											<c:when test="${leave.leaveStatus == 1}">Pending</c:when>
											<c:when test="${leave.leaveStatus == 2}">Approved</c:when>
											<c:when test="${leave.leaveStatus == 3}">Rejected</c:when>
											<c:when test="${leave.leaveStatus == 4}">Cancelled</c:when>
											<c:when test="${leave.leaveStatus == 5}">Deleted</c:when>
										</c:choose>
						</td>
					</tr>															
					</c:forEach>
				</table>
			</div>
		</form>
	</div>
	</section>
	<!-- js placed at the end of the document so the pages load faster -->
	<script src="<c:url value="/resources/js/jquery.js"></c:url>"></script>
	<script src="<c:url value="/resources/js/bootstrap.min.js"></c:url>"></script>
	<script class="include" type="text/javascript"
		src="<c:url value="/resources/js/jquery.dcjqaccordion.2.7.js"></c:url>"></script>
	<script
		src="<c:url value="/resources/js/jquery.scrollTo.min.js"></c:url>"></script>
	<script
		src="<c:url value="/resources/js/jquery.nicescroll.js"></c:url>"
		type="text/javascript"></script>
	<script src="<c:url value="/resources/js/respond.min.js"></c:url>"></script>

	<!--common script for all pages-->
	<script src="<c:url value="/resources/js/common-scripts.js"></c:url>"></script>
	<script>
	function formSubmit() {
		document.getElementById("rowIndex").value = 0;
		document.getElementById("frmLeaveHistory").submit();
	}
	$(function(){
		$("#txtKeyword").keypress(function(e){
			
			if(e.which == 13){
				formSubmit();
			}
		});
	});
</script>
</body>
</html>